<template>
  <div class="merchantSettled">
    <brevity-header :title="$t('PromoteTitle')">
      <template v-slot:text>
        <p>{{$t('PromoteText1')}}<br>{{$t('PromoteText2')}}</p>
      </template>
    </brevity-header>
    <promote-wap @openAgreement="openAgreement" />
    <entry-agreement :signImg="signImg" :promoteInfo="promoteInfo"
     @handleClose="handleClose"
     @handleAgree="handleAgree"
     v-if="dialogVisible"
    />
    <common-sign-canvas @handleSave="handleSave" @handlePrev="handlePrev" v-if="isAgree"/>
    <!-- <common-sign-canvas/> -->
    <common-footer />
  </div>
</template>
<script setup>
import { ref } from 'vue'
import BrevityHeader from "@/components/common/BrevityHeader.vue";
import PromoteWap from "@/components/promote/PromoteWap.vue";
import EntryAgreement from "@/components/promote/EntryAgreement.vue";
import CommonSignCanvas from "@/components/common/CommonSignCanvas.vue";
import CommonFooter from "@/components/common/CommonFooter.vue";
import {merchantIndex} from "@/api/index.js";
const promoteInfo = ref({})
const getContent = () => {
  merchantIndex().then(res => {
    promoteInfo.value = res.data
  }).catch(err => {})
}
getContent()
const dialogVisible = ref(false)
const isAgree = ref(false)
const openAgreement = () => {
  dialogVisible.value = true
  // document.body.style.overflowY = 'visible'
}
const handleAgree = () => {
  isAgree.value = true
}
const handleClose = () => {
  dialogVisible.value = false
  // document.body.style.overflowY = 'scroll'
}
const signImg = ref('')
const handleSave = (base64) => {
  isAgree.value = false
  signImg.value = base64
}
const handlePrev = () => {
  isAgree.value = false
}
</script>
<style scoped>
p{
  width: 100%;
  font-size: 20px;
  color: #a6a6a6;
}
</style>
